<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="" name="" id="phone" value="" placeholder="请输入手机号码"/>
		<input type="button" name="" id="btn" value="获取验证码" onclick="getCode();"/>
	</body>
</html>


<script type="text/javascript">
	function getCode() {
		var btn = document.getElementById('btn');
		var phone = document.getElementById('phone').value;
		if (!phone) {
			alert('请输入电话号码');
		} else if (phone.length !== 11) {
			// 这里应该用正则
			alert('请输入正确的手机号码')
		} else {
			var count = 30;
			btn.disabled = true;
			var timer = setInterval(function(){
				btn.value = --count;
				if (count === 0) {
					clearInterval(timer);
					btn.value = '重新获取验证码';
					btn.disabled = false;
				}
			},1000);
		}
	}
</script>